<template>
  <div>
    <div v-for="navinfo in navsList" :key="navinfo.type">
      <el-row :gutter="8" style="margin-left: 8px">
        <el-divider content-position="left">{{ navinfo.type }}</el-divider>
        <div v-for="item in navinfo.list" :key="item.name">
          <el-col :span="3" style="margin-bottom: 8px">
            <div class="card-panel" @click="handleJump(item.url)">
              <Card style="width: 200px; height: 100px">
                <div style="text-align: center">
                  <img :src="require(`../../assets/navs/${item.icon}.png`)" style="max-height: 50px" />
                  <h4>{{ item.name }}</h4>
                </div>
              </Card>
            </div>
          </el-col>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  components: {},
  data() {
    return {
      navsList: []
    }
  },
  mounted() {},
  methods: {
    handleJump(val) {
      window.open(val, '_blank')
    },
    getImgUrl(icon) {
      return require('@/assets/navs' + icon + '.png')
    }
  }
}
</script>

<style lang="scss" scoped>
.card-panel {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-radius: 15px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  width: 200px;
  height: 100px;
  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }
  }
}
.el-divider__text {
  font-size: 18px;
  border-radius: 15px;
}
</style>
